
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>订单支付</title>
<link rel="stylesheet" href='${root}css/common.css' />
<link rel="stylesheet" href='${root}css/pay/order.css' />
<script src="${root}assets/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="${root}assets/js/qrcode.js" ></script>
</head>
<body>
	<div class="container">
		<!--:include("/inc/course/header.html"){}  -->
		<div class="bd">
			<div class="bd-main">
				<div class="ep-wrapper">
					<div class="ep-pay-step ep-step-channel bd-main-container"
						style="display: block;">
						<div class="ep-order-detail">
							<div>
								<div class="ep-order-tit">
									<dl>
										<dt>商品订单：</dt>
										<dd>${obj.orderno!}</dd>
									</dl>
								</div>
								<div class="ep-order-tit">
									<span>实付金额：<em class="rmb"><i>¥</i>${obj.price,"#.##"}.00</em></span> <a
										href="javascript:void(0);" class="ep-order-view "
										data-action="expend"><span>订单详情</span><i
										class="ep-icon ep-icon-arrow"></i></a>
								</div>
								<div class="ep-order-con hide">
									<dl>
										<dt>商品名称：</dt>
										<dd>${obj.title}</dd>
									</dl>
									<dl>
										<dt>支付订单：</dt>
										<dd>${obj.orderno}</dd>
									</dl>
									<dl>
										<dt>应付金额：</dt>
										<dd>
											<span class="rmb"><i>￥</i>${obj.total_price,"##.##"}.00</span>
										</dd>
									</dl>
									<dl>
										<dt>购买时间：</dt>
										<dd>${obj.add_time,"yyyy年MM月dd日"}</dd>
									</dl>
								</div>
							</div>
						</div>
						<div class="ep-pay-method ep-pay-methods">
							<dl>
								<dt>支付方式：</dt>
								<dd class="pay-channel ">
									<div class="ep-pay-method-list-tit">
										<ul>
											<li class="iepsypay selected" data-type="wechat" title="微信支付"><span
												class="ep-icon ep-icon-wxpay"></span> <span
												class="ep-pay-method-name">微信支付</span> <!----> <i
												class="ep-icon ep-icon-selected"></i></li>
											<li class="iepsypay" data-type="alipay" title="支付宝支付">
											 <span class="ep-pay-method-name"><img style="width: 20px;height: 20px;" src="${root}images/alipay/36x36.png" />支付宝支付</span> <!----></li>
											<li class="iepsypay" style="display: none;" data-type="bank" title="网银支付" ><span
												class="ep-icon ep-icon-unionpay"></span> <span
												class="ep-pay-method-name">银行汇款</span> <!----> <!--<span class="ep-ep-icon-unionpay-tip ">5万以上推荐使用</span>-->
												<!----></li>
										</ul>
									</div>
									<div class="ep-pay-method-list-con">
										<div class="con channel-wechat show">
											<div class="clearfix">
												<div class="fl" >
													<div class="ep-qrcode-loading hide">
														<img src="//midas.gtimg.cn/enterprise/images/loading.gif"
															width="80" height="80">
													</div>
													<div class="ep-wxpay-qrcode-wrap">
														<div id="wxcode" style="width: 196px;height: 200px;" class="ep-wxpay-qrcode">
													
													</div>
													<div class="ep-wxpay-qrcode-notice">请打开手机微信，扫一扫完成支付</div>
												</div>
												</div>
												<div class="fl ep-wxpay-qrcode-tip">
													<img
														src="//midas.gtimg.cn/enterprise/images/ep_sys_wx_tip.jpg">
												</div>
											</div>
											<!--<div class="ep-qrcode-notice">距离二维码过期还剩<em>30</em>秒，过期后请刷新页面重新获取二维码</div>-->
										</div>
										<div class="con channel-alipay ">
											<div class="clearfix">
												<div class="fl">
													<div class="ep-qrcode-loading hide">
														<img src="//midas.gtimg.cn/enterprise/images/loading.gif"
															width="80" height="80">
													</div>
													<div class="ep-wxpay-qrcode-wrap ">
													<br/><br/>
														<a data-action="delay" href="${root}pay/alipay_pay?id=${obj.id}" title="立即支付" class="ep-btn ep-btn-blue">立即支付</a>
													</div>
													<div class="ep-qqpay-qrcode-notice hide">请打开支付宝，扫一扫完成支付</div>
												</div>
												<div class="fl ep-wxpay-qrcode-tip">
													<img style="width: 156px;height: 255px;margin-left: 60px;" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1482606012,1225096400&fm=23&gp=0.jpg">
												</div>
											</div>
										</div>
										<div class="con channel-bank ">
											<div class="ep-unionpay-con">
												<div class="ep-unionpay-banks">
													<div class="layer-neat-l banktype hide">
														<span class="label">银行类型：</span> <label class="selected"
															data-banktype="peBank" data-action="banktype"> <input
															type="radio"> <i class="ep-icon ep-icon-radio"></i>个人银行
														</label> <label data-banktype="epBank" data-action="banktype">
															<input type="radio"> <i
															class="ep-icon ep-icon-radio"></i>企业银行
														</label>
													</div>
													<div class="mod-bank cf">
														<span class="title">支持银行</span>
														<div class="bank-list epBank" style="display: none">
															<label class="bank-logo-wrap" data-bank="icbc"
																data-action="bank"> <i class="ico_icbc"></i>工商银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="abc"
																data-action="bank"> <i class="ico_abc"></i>农业银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="cmb"
																data-action="bank"> <i class="ico_cmb"></i>招商银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="ccb"
																data-action="bank"> <i class="ico_ccb"></i>建设银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="spdb"
																data-action="bank"> <i class="ico_ccb"></i>浦发银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="cebb"
																data-action="bank"> <i class="ico_cebb"></i>光大银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="cib"
																data-action="bank"> <i class="ico_cib"></i>兴业银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="boc"
																data-action="bank"> <i class="ico_boc"></i>中国银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="pingan"
																data-action="bank"> <i class="ico_pingan"></i>平安银行
																<i class="ep-icon ep-icon-check"></i>
															</label>
														</div>
														<div class="bank-list peBank" style="display: block">
															<label class="bank-logo-wrap" data-bank="icbc"
																data-action="bank"> <i class="ico_icbc"></i>工商银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="abc"
																data-action="bank"> <i class="ico_abc"></i>农业银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="cmb"
																data-action="bank"> <i class="ico_cmb"></i>招商银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="ccb"
																data-action="bank"> <i class="ico_ccb"></i>建设银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="boc"
																data-action="bank"> <i class="ico_boc"></i>中国银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="post"
																data-action="bank"> <i class="ico_post"></i>邮政银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="boco"
																data-action="bank"> <i class="ico_boco"></i>交通银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="gdb"
																data-action="bank"> <i class="ico_gdb"></i>广发银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="cmbc"
																data-action="bank"> <i class="ico_cmbc"></i>民生银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="pingan"
																data-action="bank"> <i class="ico_pingan"></i>平安银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="cebb"
																data-action="bank"> <i class="ico_cebb"></i>光大银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="cib"
																data-action="bank"> <i class="ico_cib"></i>兴业银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="ecitic"
																data-action="bank"> <i class="ico_ecitic"></i>中信银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="bob"
																data-action="bank"> <i class="ico_bob"></i>北京银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="srcb"
																data-action="bank"> <i class="ico_srcb"></i>上海农商
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="spdb"
																data-action="bank"> <i class="ico_spdb"></i>浦发银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="nbcb"
																data-action="bank"> <i class="ico_nbcb"></i>宁波银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="njcb"
																data-action="bank"> <i class="ico_njcb"></i>南京银行
																<i class="ep-icon ep-icon-check"></i>
															</label> <label class="bank-logo-wrap" data-bank="hkbea"
																data-action="bank"> <i class="ico_hkbea"></i>东亚银行
																<i class="ep-icon ep-icon-check"></i>
															</label>
														</div>
													</div>
													<div class="layer-neat-l cardtype">
														<span class="label">选择卡种：</span> <label
															class="disabled debit" data-action="cardtype"
															data-cardtype="debit"> <input type="radio">
															<i class="ep-icon ep-icon-radio"></i>储蓄卡
														</label> <label class="disabled credit" data-action="cardtype"
															data-cardtype="credit"> <input type="radio">
															<i class="ep-icon ep-icon-radio"></i>信用卡
														</label>
													</div>
												</div>
												<div class="ep-pay-operate">
													<a data-action="delay" href="javascript:void(0);"
														title="立即支付" class="ep-btn ep-btn-blue disabled">立即支付</a>
												</div>
											</div>
										</div>
									</div>
									<div class="ep-qrcode-error-tip" style="display: none;">
										<span class="ep_icon_warning_tip"></span><span
											class="ep_warning_text"></span>
									</div>
								</dd>
							</dl>
						</div>
					</div>
					<div class="ep-pay-step ep-step-pending"></div>
					<div class="ep-pay-step ep-step-success"></div>
					<div class="ep-pay-step ep-step-fail"></div>
				</div>
			</div>
		</div>
		<!--:include("/inc/footer.html"){}  -->
	</div>
<script>
	$(function(){
		$(".ep-order-view").click(function(){
			if($(".ep-order-con").hasClass("hide")){
				$(".ep-order-con").removeClass("hide")
			}else{
				$(".ep-order-con").addClass("hide")
			}
		})
		//微信二维码
		$.ajax({url:"${root}json/pay/wx_code?id=${obj.id}",success:function(result){
	        new QRCode(document.getElementById("wxcode"), result.url);
	    }});
		
		$(".iepsypay").click(function(){
			if(!$(this).hasClass("selected")){
				$(".iepsypay").removeClass("selected");
				$(this).addClass("selected")
			}
			$(".con").removeClass("show");
			$(".iepsypay").find("i").remove();
			if($(this).attr("data-type")=="wechat"){
				$(".channel-wechat").addClass("show");
				$(this).append('<i class="ep-icon ep-icon-selected"></i>')
			}else if($(this).attr("data-type")=="alipay"){
				$(".channel-alipay").addClass("show");
				$(this).append('<i class="ep-icon ep-icon-selected"></i>')
			}else{
				$(".channel-bank").addClass("show");
				$(this).append('<i class="ep-icon ep-icon-selected"></i>')
			}
		})
	})

</script>
</body>
</html>